<script setup lang='ts'>
import { ref } from 'vue';
import './css/Match.scss'
import { request } from 'http';
// import { createRequire } from 'module';
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()
// 检查浏览器是否支持MediaRecorder API
// 比赛数据（图片，名称）
const referee_img = [
  { id: 1, name: '篮球挑战赛', url: new URL('./img/8.png', import.meta.url).href },
  { id: 2, name: '省职教足球比赛', url: new URL('./img/9.png', import.meta.url).href },
  { id: 3, name: '篮球挑战赛', url: new URL('./img/8.png', import.meta.url).href },
  { id: 4, name: '省职教足球比赛', url: new URL('./img/9.png', import.meta.url).href },
]
// 筛选
const sx = [
  { id: 1, name: '青少年足球比赛', url: new URL('./img/10.png', import.meta.url).href },
  { id: 2, name: '第一节青少年篮球比赛', url: new URL('./img/11.png', import.meta.url).href },
  { id: 3, name: '女子排球比赛', url: new URL('./img/12.png', import.meta.url).href },
]
// 赛事列表
const sslist = [
  { id: 1, name: '第一届城市定向自行车比赛', url: new URL('./img/17.png', import.meta.url).href, price: 100, h: 20, m: 32, s: 10 },
  { id: 2, name: '第一届城市定向自行车比赛', url: new URL('./img/18.png', import.meta.url).href, price: 98, h: 10, m: 12, s: 10 },
  { id: 3, name: '第一届城市定向自行车比赛', url: new URL('./img/19.png', import.meta.url).href, price: 198, h: 15, m: 10, s: 15 },
]

// 点击跳转直播
const watchzb=()=>{
  console.log('watchzb');
  router.push('/home/match1')
  
}

</script>
<template>
  <div class="match">
    <span class='match-title'>赛事</span>
  </div>
  <!-- <div> -->
  <div class="con1">
    <!-- 线上赛事和线下赛事 -->
    <div class="con11">
      <div class="con111">
        <span class="con1111">
          --线上赛事--
        </span>
        <div class="con1111img">
          <img src="./img/1.png" class="con1111img1" alt="">
          <img src="./img/2.png" class="con1111img2" alt="">
        </div>
        <span class="con1112">
          赶快来参与吧
        </span>
        <span class="con1113">
          GO
        </span>
        <span class="con1114">
          <img src="./img/3.png" alt="">
        </span>
      </div>

      <div class="con111_">
        <span class="con1111_">
          --线下赛事--
        </span>
        <div class="con1111img_">
          <img src="./img/4.png" class="con1111img1_" alt="">
          <img src="./img/5.png" class="con1111img2_" alt="">
        </div>
        <span class="con1112_">
          赶快来参与吧
        </span>
        <span class="con1113_">
          GO
        </span>
        <span class="con1114_">
          <img src="./img/6.png" alt="">
        </span>
      </div>
      <div>
      </div>
      <!-- </div>  -->
    </div>
    <!-- 图片 -->
    <div class="con_img">
      <img src="./img/7.png" class="con_img_img" alt="">
    </div>
    <!-- 推荐赛事 -->
    <div class="referee">
      <div class="referee_tj">推荐赛事</div>
      <button class="referee_btn">发布赛事</button>
      <div class="referee_lb">
        <div v-for="item in referee_img" :key="item.id" class="referee_lb_item">
          <div class="referee_lb_item_img">
            <img :src="item.url" class="referee_lb_item_img1" alt="">
          </div>
          <div class="referee_lb_item_tx">
            {{ item.name }}
          </div>
          <div class="referee_lb_item_txt">
            <div class="referee_lb_item_txt1">点击观赛</div>
            <div class="referee_lb_item_txt2">GO</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="sx">
      <!-- 上面的四个部分 -->
      <div class="sxone">
        <div>
          <span class="sxone1">赛事</span> <br>
          <button class="sxone2">猜你喜欢</button>
        </div>
        <div>
          <span class="sxone1s">附近</span> <br>
          <button class="sxone2s">附近赛事</button>
        </div>
        <div>
          <span class="sxone1s">按时间</span> <br>
          <button class="sxone2s">时间排序</button>
        </div>
        <div>
          <span class="sxone1s">按人气</span> <br>
          <button class="sxone2s">人气排序</button>
        </div>
      </div>
      <!-- 下面的三个模块 -->
      <div v-for="item in sx" :key="item.id" class="sxtwo_item">
        <img :src="item.url" class="sxtwo_item_img" alt="">
        <span class="sxtwo_item_tx1">{{ item.name }}</span>
        <span class="sxtwo_item_tx2">比赛详情</span>
        <span class="sxtwo_item_tx3">比赛详情比赛详情比赛详情比赛详情</span>
        <span class="sxtwo_item_tx4">888人参与</span>
        <div class="sxtwo_item_go">
          <span class="sxtwo_item_go1">GO</span>
        </div>
      </div>
      <!-- 烈士公园 -->
      <div class="lsgy">
        <img src="./img/13.png" class="lsgy_img" alt="">
      </div>
      <!-- 赛事直播 -->
      <div class="sszb">
        <span class="sszb_one">赛事直播</span>
        <span class="sszb_two">零距离观看你喜欢的赛事</span>
        <span class="sszb_three">更多</span>
        <span class="sszb_four">></span>
      </div>
      <!-- 直播 -->
      <div class="zb">
        <div class="zbz">
          <img src="./img/14.png" class="zbz_one_img" alt="">
          <span class="zbz_one">直播中</span>
        </div>
        <div class="zbz_two">
          <img src="./img/15.png" class="zbz_two_img" alt="">
        </div>
        <div class="zbz_two_one">第一届城市定向自行车比赛</div>
        <div class="zbz_two_two">等正在观看比赛</div>
        <div class="zbz_two_three" @click="watchzb">马上观看</div>
        <img class="zbz_two_four" src="./img/16.png" alt="">
        <!-- 大型赛事 -->
        <div class="dxss">
          <img src="./img/21.png" class="dxss1" alt="">
          <span class="dxss2">大型赛事</span>
          <span class="dxss3">更多</span>
          <img src="./img/20.png" class="dxss4" alt="">
          <span class="dxss5">></span>
          <div class="dxss_item">
            <div v-for="item in sslist" :key="item.id" class="dxss_item1">
              <img class="dxss_item1_one" :src="item.url" alt="">
              <div class="dxss_item1_two">{{ item.name }}</div>
              <div class="dxss_item1_three">已报名3362人</div>
              <div class="dxss_item1_four">仅剩63人</div>
              <div class="dxss_item1_five">距结束还剩</div>
              <div class="dxss_model1">{{ item.h }} </div><div  class="dxss_model2">{{ item.m }}</div><div  class="dxss_model3">{{ item.s }}</div>
              <div class="dxss_model4">：</div> <div  class="dxss_model5">:</div>
              <div class="dxss_item1_six">￥{{ item.price }} <span
                  style=" text-decoration: line-through;color:black">￥199</span></div>
              <button class="dxss_btn">点击报名</button>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>
<style scoped></style>